<template>
  <div>
    <upload-show ref="uploadShow" v-if="thisValue" :size="size" :data="thisValue" :readonly="readonly"
      @click-big-image="onBigImage" @click-delete="onDeleteImg"></upload-show>
    <upload-add ref="uploadAdd" v-show="!thisValue && !readonly" :docType="docType" :size="size"
      :accept="ACCEPT_TYPE_IMAGE" :before-upload="beforeUpload" :is-image="true" @upload-success="handleAvatarSuccess"
      @upload-error="handleAvatarError"></upload-add>
    <!-- 分割功能 -->
    <!-- <image-cutting
        v-if="isShowImageCutting"
        ref="imageCutting"
        @on-submit="onSubmit"
        @on-close="isShowImageCutting = false"
    ></image-cutting>-->
  </div>
</template>

<script lang="ts" >

export default {
  name: "UploadImg"
};
</script>

<script lang="ts" setup>
import { withDefaults, ref, computed } from "vue";
import { ElMessage } from "element-plus";
import UploadAdd from "./components/UploadAdd.vue";
import UploadShow from "./components/UploadShow.vue";
import { ACCEPT_TYPE, MeFileClass } from "./config";
import { FILE_URL } from "@/config";
import { appAction } from "@/store/app";
import PhotoViewer from "@/components/PhotoViewer";

let props = withDefaults(defineProps<{

  /**
   * 大小
   */
  size?: string
  /**
   * 文件令牌
   */
  modelValue: string;

  /**
   * 上传参数
   */
  docType: string;

  /**
   * 是否只读
   */
  readonly?: boolean

  /**
   * 限制上传图片的宽 高 比值
   */
  imgWh?: string;

  /**
   * 上传的文件类型
   */
  fileType?: "IMAGE" | "AUDIO";
}>(), {
  size: "148px",
  modelValue: "",
  readonly: false,
  fileType: "IMAGE",
  docType: "",
  imgWh: ""
})

let emit = defineEmits<{
  (e: "update:modelValue", value: string): void
}>()

let thisValue = computed<MeFileClass | null>({
  get() {
    if (props.modelValue) {
      return new MeFileClass(props.modelValue, {
        isLoading: false,
        hzname: "png"
      });
    } else if (meValue.value instanceof MeFileClass) {
      return meValue.value;
    } else {
      return null;
    }
  },
  set(value: MeFileClass | null) {
    if (value instanceof MeFileClass) {
      if (value.url) {
        emit("update:modelValue", value.url)
      } else {
        emit("update:modelValue", "")
      }
    } else {
      emit("update:modelValue", "")
    }
  }
})

/**
 * 上传类型
 */
let ACCEPT_TYPE_IMAGE = ref(ACCEPT_TYPE.IMAGE);

/**
 * 图片展示
 * 用于占位
 */
let meValue = ref<MeFileClass | null>();

/**
  * 上传之前
  */
function beforeUpload(file: File): Promise<void> {
  //添加图片占位
  meValue.value = new MeFileClass("", {
    isLoading: true,
    hzname: "png"
  });
  return Promise.resolve();
}

/**
 * 图片上传完成
 */
function handleAvatarSuccess(res: any, file: File) {
  //表示成功
  ElMessage.success("图片上传成功");
  //更新图片
  thisValue.value = new MeFileClass(
    res.fileUrl,
    {
      isLoading: false,
      hzname: "png"
    }
  );
}


/**
 * 上传失败
 */
function handleAvatarError(file: any) {
  //删除图片
  onDeleteImg();
}

/**
 * 当点击查看大图的时候
 */
function onBigImage() {
  if (thisValue.value) {
    let a = new PhotoViewer([
      {
        title: thisValue.value.url,
        src: thisValue.value.url
      }
    ]);
    console.log(a);
  }
}

/**
 * 当删除图片的时候
 */
function onDeleteImg() {
  thisValue.value = null;
  meValue.value = null;
}
</script>

<style lang="less" scoped>
@import url(./main.less);
</style>